<template>
	<div class="login">
		<!-- <img src="../../../static/images/agent-logo.png" alt="" class="top-logo"> -->
        <div class="header flex-c">DL客户系统</div>
		<div class="top-title">
			<div class="gray-line"></div>
			<div class="top-title-fonts">代理登录</div>
			<div class="gray-line"></div>
		</div>
		
		<van-loading class="loading" type="spinner" color="#1989fa"  v-if="showLoading"/>
		
		<div class="input-area">
			<div class="user-name">
				<img src="../../../static/images/agent-login-account.png" alt="" class="user-name-icon">
				<div class="middle-gray-line"></div>
				<input id="userName" type="text" placeholder="请输入登录帐户,5到12位字母或数字" ref="accountInput">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/agent-login-pwd.png" alt="" class="user-name-icon ">
				<div class="middle-gray-line"></div>
				<input id="userPwd" type="password" placeholder="请输入密码,6位或以上数字/字母/字符" ref="pwdInput">
			</div>
			<div class="user-name user-pwd">
				<img src="../../../static/images/googleCode.png" alt="" class="icon">
				<div class="middle-gray-line"></div>
				<input id="verificationCode" type="text" maxlength="11" placeholder="请输入动态码" ref="googleCodeInput">
<!--				<van-button v-if="!showNum" class="vc-button" color="#0072E5" @click.native="sendMessage" round>{{vcBtnFonts}}</van-button>-->
<!--				<van-button v-if="showNum" class="vc-button" color="#0072E5" round disabled>{{vcBtnFonts}}</van-button>-->
			</div>
			<div class="to-text">若有疑问请联系我们的招商部门</div>
		</div>
		<div class="submitBlue">
			<van-button class="btnCover" color="#00459E" @click.native="toSign" round>登录</van-button>
		</div>
		<div class="to-reg" @click="toReg()">还没有代理帐户，<span class="red-fonts">点击注册</span></div>
        <div class="version-show flex-c">V{{ API.version }}</div>
	</div>
</template>

<script>
import MuSubmit from '../../components/submit/muSubmit'
import {Toast} from 'vant'

export default {
	name: 'login',
	components: {
		MuSubmit,
	},
	data() {
		return {
			disabledFlag: true,
			checked: true,
			showLoading: false,
			queryCookie: '',
			cookieValue: '',
			vcBtnFonts:'获取验证码',
			showNum:false,
		}
	},
	created() {
	
	},
    beforeRouteLeave (to, from, next) {    
		this.$destroy(true)
		next()
	},
	//数据渲染完成
	mounted() {
		//判断登录计划任务是否执行
		this.setIsLogin(false)
	},
	methods: {
		//判断是否保存了登录状态，已登录则直接跳转到首页
		isLogin: function () {
			this.ServerAPI.postAPI(this.API.isLogin, "", (success, data) => {
				if (success) {
					if (data.code === '0000') {
						this.setLogin(true)
						this.$router.replace({path: '/'})
					}
				}
			});
		},
		btnStore() {
			if (this.$refs.login_account.value !== '' && this.$refs.login_pw.value !== '') {
				this.disabledFlag = false
			} else {
				this.disabledFlag = true
			}
		},
		toSign() {
			this.showLoading = true;
			let params = {
				loginName: this.$refs.accountInput.value,
				password: this.$refs.pwdInput.value,
				googleCode: this.$refs.googleCodeInput.value,
			};
			this.ServerAPI.postAPI(this.API.login, params, this.loginHandler)
		},
		loginHandler(success, data) {     //
            this.showLoading = false
			if (success) {
				if (data.code === "0000") {
					this.setLogin(true)
                    sessionStorage.setItem("loginMark", "1");
					this.$store.dispatch('popRootKeepAlive');
					if(sessionStorage.getItem('isSelect') === '1' || sessionStorage.getItem('isSelect') === null || sessionStorage.getItem('isSelect') === undefined){
						this.$router.replace({path: '/'})
					}else if(sessionStorage.getItem('isSelect') === '2'){
						this.$router.replace({path: '/lowerLevel'})
					}else if(sessionStorage.getItem('isSelect') === '3'){
						this.$router.replace({path: '/allReports'})
					}else if(sessionStorage.getItem('isSelect') === '4'){
						this.$router.replace({path: '/my'})
					}
				} else {
                    this.$toastTop(data.info, 3)
				}
			} else {
                this.$toastTop('网络链接失败，请稍后尝试', 2)
			}
		},
		help() {
			this.$router.push('/help')
		},
		sendMessage() {
			this.showNum = true
			this.vcBtnFonts = '发送中'
			let params = {
				type: 'login'
			};
			this.ServerAPI.postAPI(this.API.sendSms, params, (success, data) => {
				if (success) {
					if (data.code == "0000") {
                        this.$toastTop('验证码发送成功', 1);
						this.getCode();
					} else {
                        this.$toastTop(data.info, 3);
					}
				}else{
                    this.$toastTop('网络链接失败，请稍后尝试', 2);
				}
			})
		},
		toReg() {
			this.$router.push('/register');
		},
		getCode() {
			const TIME_COUNT = 60;
			if (!this.timer) {
				this.vcBtnFonts = TIME_COUNT;
				this.timer = setInterval(() => {
					if (this.vcBtnFonts > 0 && this.vcBtnFonts <= TIME_COUNT) {
						this.vcBtnFonts--;
						this.showNum = true;
					} else {
						this.vcBtnFonts = '获取验证码';
						this.showNum = false;
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000)
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.login {
	width: 100%;
	height: 100%;
	font-family: PingFang-SC-Medium;
	.top-logo {
		width: 1.8rem;
		display: block;
		margin: .3rem auto .3rem;
	}
    .header {
        width: 2.6rem;
        height: 0.86rem;
        color: #FFFFFF;
        background: #1B3D8E;
        border-radius: .12rem;
        font-size: .4rem;
        margin: 1rem auto 0;
    }
	.top-title {
		display: flex;
		justify-content: center;
		align-items: center;
        margin-top: .6rem;
		.gray-line {
			width: 1rem;
			height: 1px;
			background: #5D5D5D;
		}
		.top-title-fonts {
			font-size: .45rem;
			font-weight: bolder;
			margin: 0 .2rem;
		}
	}
	.input-area {
		width: 90%;
		margin: .8rem auto 0;
		position: relative;
		.name-remind {
			position: absolute;
			top: -.4rem;
			font-size: .24rem;
			color: #AAAAAA;
		}
		.user-name {
			display: flex;
			align-items: center;
			padding: .2rem .3rem;
			border-radius: .6rem;
			background: rgb(238,238,238);
			.user-name-icon {
				width: .4rem;
				margin-left: .2rem;
			}
			.icon {
				width: .4rem;
				margin-left: .2rem;
			}
			.middle-gray-line {
				height: .6rem;
				width: 1px;
				background: rgba(142,142,141,.5);
				margin: 0 .2rem;
			}
			input {
				width: 100%;
				border: none;
				font-size: .26rem;
				background: rgb(238,238,238);
			}
			.vc-button {
				position: absolute;
				right: .15rem;
				width: 2rem;
				height: .8rem;
				line-height: .8rem;
				font-size: .26rem;
			}
		}
		.user-pwd {
			margin-top: .6rem;
			display: flex;
			align-items: center;
			padding: .2rem .35rem;
			border-radius: .6rem;
			
			.user-pwd-icon {
				width: .4rem;
				margin-right: .1rem;
			}
			
			input {
				width: 100%;
				border: none;
				font-size: .26rem;
			}
		}
	}
	.submitBlue {
		width: 90%;
		margin: 0 auto;
		.btnCover {
			width: 100%;
			height: 1rem;
			line-height: 1rem;
			margin-top: .3rem;
			font-weight: bold;
			font-size: .35rem;
		}
	}
	.to-text{
		width: 4.8rem;
		margin: .1rem auto 0;
		font-size: .3rem;
		text-align: center;
		color: #939393;	
	}
	.to-reg {
		width: 4.8rem;
		height: .6rem;
		line-height: .6rem;
		margin: .3rem auto 0;
		font-size: .3rem;
		text-align: center;
		color: #939393;
		background: url("../../../static/images/activeRed.gif") no-repeat;
		background-position: right center;
		background-size: 11% 58%;
		
		.red-fonts {
			color: rgb(0,109,242);
		}
	}
    .version-show {
        width: 100%;
        position: fixed;
        bottom: 0;
        color: #939393;
        font-size: .26rem;
    }
}
.toApp {
	position: relative;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 1.2rem;
	background: #000000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.left-part {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.toApp-close {
			width: .4rem;
			height: .4rem;
			margin-left: .15rem;
		}
		img {
			width: .8rem;
			height: .8rem;
			margin-left: .2rem;
		}
		.toApp-fonts {
			margin-left: .2rem;
			p {
				font-size: .28rem;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
	.toApp-right {
		width: 2rem;
		height: .6rem;
		line-height: .6rem;
		text-align: center;
		font-weight: bold;
		font-size: .26rem;
		background: #FFFFFF;
		color: #0052F5;
		border-radius: .1rem;
		margin-right: .3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		img {
			width: .3rem;
			margin-left: .1rem;
		}
	}
}
.loading {
	position: fixed;
	text-align: center;
	top: 35%;
	left: 50%;
	margin-left: -15px;
	z-index: 999;
}
</style>



